<template>
  <n-form
    ref="formRef"
    :model="formData"
    :rules="catalogRules"
    label-placement="left"
    :label-width="100"
  >
    <n-form-item label="目录名称" path="name">
      <n-input placeholder="请输入目录名称" v-model:value="formData.name" />
    </n-form-item>
    <n-form-item label="排序" path="order">
      <n-input-number placeholder="请输入排序" v-model:value="formData.order" />
    </n-form-item>
    <n-form-item label="目录标记" path="routeName">
      <n-input
        placeholder="请输入目录标记，同时也为路由名称"
        v-model:value="formData.routeName"
      />
    </n-form-item>
    <n-form-item label="图标" path="icon">
      <n-input placeholder="请输入图标名称" v-model:value="formData.icon">
        <template #suffix>
          <a
            href="https://icon-sets.iconify.design/"
            target="_blank"
            class="w-24 h-24 b-rd-5 f-c-c cursor-pointer"
            hover="bg-#eeeeee"
          >
            <icon icon="basil:search-outline" class="text-20" />
          </a>
        </template>
      </n-input>
    </n-form-item>
    <n-form-item label="状态" path="status">
      <n-switch v-model:value="formData.status">
        <template #checked>启用</template>
        <template #unchecked>禁用</template>
      </n-switch>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
import { Icon } from "@iconify/vue";
import { catalogRules } from "./rules";
import { FormInst } from "naive-ui";
import { Props, Emits, useForm } from "./service";

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const formRef = ref<FormInst>();
const valid = () => formRef.value?.validate();
const restoreValid = () => formRef.value?.restoreValidation();

const { formData, handleSubmit, handleReset } = useForm({
  type: 0,
  props,
  emits,
  restoreValid,
});

defineExpose({ handleSubmit, handleReset, valid });
</script>
